<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="../../../../../js/mui.min.js"></script>
		<link href="../../../../../css/mui.min.css" rel="stylesheet"/>
		<script src="../JQ.js"></script>
		<script type="text/javascript" charset="utf-8">
		  	mui.init();
		</script>
	    <style>
		  .duan{
			  height: 16vh;
			  width: 16vh;
			  border-radius: 50vh;
			  background-color: rgb(255, 255, 255, 0.6);
			  box-shadow: 0 0 0 0 rgb(255 255 255 / 25%),
			  0 0 0 10px rgb(255 255 255 / 25%),
			  0 0 0 20px rgb(255 255 255 / 25%);
			  animation: duanRipple 1s linear infinite;
		  }
		  @-webkit-keyframes duanRipple {
		    0% {
		      /* 在box四周添加三层白色阴影 */
		      box-shadow: 0 0 0 0 rgb(255 255 255 / 25%), 
		      0 0 0 10px rgb(255 255 255 / 25%),
		      0 0 0 20px rgb(255 255 255 / 25%);
		    }
		    
		    100% {
		      /* 分别改变三层阴影的距离
		      形成两帧的动画,然后在transition的过渡下形成动画 */
		      box-shadow: 0 0 0 10px rgb(255 255 255 / 25%), 
		      0 0 0 20px rgb(255 255 255 / 25%), 
		      0 0 0 40px rgba(50, 100, 245, 0);
		    }
		  }
		  
		  .bao{
			height: 16vh;
			width: 16vh;
			border-radius: 50px;
			background-color: rgb(0, 255, 85, 0.6);
			box-shadow: 0 0 0 0 rgb(0 255 85 / 25%),
			0 0 0 10px rgb(0 255 85 / 25%),
			0 0 0 20px rgb(0 255 85 / 25%);
			animation: baoRipple 0.2s linear infinite;
		  }
		  @-webkit-keyframes baoRipple {
		    0% {
		      /* 在box四周添加三层白色阴影 */
		      box-shadow: 0 0 0 0 rgb(0 255 85 / 25%),
		      0 0 0 10px rgb(0 255 85 / 25%),
		      0 0 0 20px rgb(0 255 85 / 25%);
		    }
		    
		    100% {
		      /* 分别改变三层阴影的距离
		      形成两帧的动画,然后在transition的过渡下形成动画 */
		      box-shadow: 0 0 0 10px rgb(0 255 85 / 25%), 
		      0 0 0 20px rgb(0 255 85 / 25%), 
		      0 0 0 40px rgba(50, 100, 245, 0);
		    }
		  }
	    </style>
	  </head>
	  <body style="background-color: cadetblue ;text-align: center;"> 
	  <header class="mui-bar mui-bar-nav">
	  	<a class="mui-icon mui-icon-left-nav mui-pull-left" id="back"><p>结束</p></a>
	  	<h1 class="mui-title">加成:0%</h1>
	  </header>
		<div class="duan" style="margin-top: 40vh;margin-left: 18vh;font-size: 300%;"></div>
		<div class="bao" style="margin-top: 40vh;margin-left: 18vh;font-size: 300%;"></div>
		<script>
			document.getElementById("back").onclick = function(){
				var demo = plus.webview.currentWebview();
				demo.hide();
				plus.storage.setItem("RefinerDataNow",String(DzAdd));
				plus.webview.close(demo);
			}
			
			
			setTimeout(function(){
				plus.storage.setItem("RefinerDataNow",String(DzAdd));
				var demo = plus.webview.currentWebview();
				demo.hide();
				plus.webview.close(demo);
			},30000);
			
			var DzAdd = 0;
			
			
			$(".bao").hide();
			setInterval(function(){
				if(Math.floor(Math.random()*(2+1))+0==0){
					$(".duan").hide();
					$(".bao").show();
					setTimeout(function(){
						$(".bao").hide();
						$(".duan").show();
					},1000);
				}
			},3000);
			
			$(".duan").click(function(){
				if (DzAdd!=0) {
					DzAdd -= 1;
					$(".mui-title").text("加成:"+String(DzAdd)+"%");
					Number(DzAdd);
				}
			});
			
			$(".bao").click(function(){
				DzAdd += 1;
				$(".mui-title").text("加成:"+String(DzAdd)+"%");
				Number(DzAdd);
			});
			
			
		</script>
	  </body>
</html>